import React,{Component} from 'react'

import {
    View,
    Text,
    ScrollView,
    Button,
    ToastAndroid,
    Alert,
    Modal,
    ActivityIndicator,
    TextInput,
    Dimensions,
    StyleSheet
}from 'react-native'

import Icon from 'react-native-vector-icons/Ionicons';

import loading from '../../commons/loading'

const { width, height } = Dimensions.get('window');

const styles=StyleSheet.create({
    warp:{
        width:width,
        backgroundColor:'white'
    },
    item:{
        width:width,
        borderBottomWidth:1,
        borderColor:'#ddd',
        paddingLeft:10,
        paddingRight:10,
        height:50,
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center'
    },
    input:{
        width:width/2-5
    }
})

var checklist=[
            {
                isChecked:false,
                id:"5bddb041685e465a8b48209e8db5c921",
                name:'下单员'
            },
            {
                isChecked:false,
                id:"7d0a720bbecc40dca7c5a4a52a5d9d73",
                name:'退单员'
            },
            {
                isChecked:false,
                id:"9018b759f4744827bf3e3e503eb806e1",
                name:' 老板'
            }
        ]

export default class EmployeeAdd extends Component{
    static navigationOptions={
        title:'员工添加',
        headerTitleStyle: {
        alignSelf:'center'
      },
    };


    componentWillMount(){
        if(this.props.navigation.state.params.roledata){
            var data=this.props.navigation.state.params.roledata
            console.log(data)
            this.setState({
                loginName:data.loginName,
                username:data.name,
                oldLoginName:data.name,
                oldid:data.id
            })
            var _this=this
            setTimeout(function(){
                console.log(_this.state.oldLoginName)
            console.log(_this.state.oldid)
            },1000)
            
        }
        if(this.props.navigation.state.params.type){
            this.setState({
                changetype:this.props.navigation.state.params.type
            })
        }
      }
    state=({
        changetype:'添加',
        type:'请选择',
        showloading:false,
        loginName:'',
        username:'',
        password:'',
        surepassword:'',
        email:'',
        oldLoginName:'',
        oldid:''
    })

    savedata=function(data){
        var arry=[]
        for(var i=0;i<data.length;i++){
            arry.push(checklist[data[i]])
        }
        this.setState({
            type:arry
        })
    }

    addemploy= async function(){
        if(this.state.loginName==''){
            ToastAndroid.show('请输入登录名', ToastAndroid.SHORT);
            return
        }
        if(this.state.username==''){
            ToastAndroid.show('请输入姓名', ToastAndroid.SHORT);
            return
        }
        if(this.state.password==''){
            ToastAndroid.show('请设置密码', ToastAndroid.SHORT);
            return
        }
        if(this.state.password!=this.state.surepassword){
            ToastAndroid.show('两次设置的密码不一致', ToastAndroid.SHORT);
            return
        }
        if(this.state.type=='请选择'){
            ToastAndroid.show('请选择角色', ToastAndroid.SHORT);
            return
        }
        try{
            this.setState({
                showloading:true
            })
            console.log("name="+this.state.username+"&mobile="+this.state.loginName+"&token="+global.token+"&newPassword="+this.state.password+"&email="+this.state.email+"&roleIdList="+this.getroleid()+"&loginFlag=1&company.id=1&office.id="+global.sellerid+"&createBy.id=e20ba18a06b54f6db4a4cfa7c72edd8d&updateBy.id=e20ba18a06b54f6db4a4cfa7c72edd8d&oldLoginName="+(this.state.oldLoginName?this.state.oldLoginName:'')+(this.state.oldid?("&id="+this.state.oldid):'')+"&userid="+global.userdata.id)
            var data=await fetch(global.mainurl+'/bossHelper/saveUser', {
                method: 'POST',
                 mode : 'cors',
                headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                body: "name="+this.state.username+"&mobile="+this.state.loginName+"&token="+global.token+"&newPassword="+this.state.password+"&email="+this.state.email+"&roleIdList="+this.getroleid()+"&loginFlag=1&company.id=1&office.id="+global.sellerid+"&createBy.id=e20ba18a06b54f6db4a4cfa7c72edd8d&updateBy.id=e20ba18a06b54f6db4a4cfa7c72edd8d&oldLoginName="+(this.state.oldLoginName?this.state.oldLoginName:'')+(this.state.oldid?("&id="+this.state.oldid):'')+"&userid="+global.userdata.id
         })
            console.log(data)
            var result=await data.json()
            console.log(result)
         if(result.code==1){
             ToastAndroid.show('添加成功', ToastAndroid.SHORT);
             this.props.navigation.state.params.reload()
             this.props.navigation.goBack()
         }
         else
            ToastAndroid.show('操作失败，登录名已存在或其他原因', ToastAndroid.SHORT);
         this.setState({
                showloading:false
            })
        } catch(error){
            console.log(error)
        }


    }

    getrole=function(){
        var attr=''
        if(typeof(this.state.type)=='object'){
            for(var i=0;i<this.state.type.length;i++){
                attr+=this.state.type[i].name
            }
            return attr
        }
        else
        return '请选择'
    }

    getroleid=function(){
        var attr=''
        if(typeof(this.state.type)=='object'){
            for(var i=0;i<this.state.type.length;i++){
                attr+=this.state.type[i].id
            }
            return attr
        }
    }

    render(){
        return(
            <ScrollView style={styles.warp}>
            
            
            <View>
            {loading(this.state.showloading)}
            <View style={styles.item}>
              <Text>登录名（电话）</Text>
              <TextInput value={this.state.loginName} style={styles.input} placeholder="请输入登录名"
              keyboardType={'numeric'}
              onChangeText={(text)=>{
                  this.setState({
                      loginName:text
                  })
              }}
              />
            </View>
            <View  style={styles.item}>
              <Text>姓名</Text>
              <TextInput value={this.state.username} style={styles.input} placeholder="请输入姓名"
              onChangeText={(text)=>{
                  this.setState({
                      username:text
                  })
              }}
              />
            </View>
            <View  style={styles.item}>
              <Text>角色</Text>
              <Text
              onPress={()=>{
                        this.props.navigation.navigate("CheckBoxx",{data:[1,2,3],save:(d)=>{this.savedata(d)}})
                    }}
              >{this.getrole()}<Icon name="ios-arrow-dropright" size={15} color="#4F8EF7" /></Text>
            </View>
            <View  style={styles.item}>
              <Text>密码</Text>
              <TextInput keyboardType={'numeric'} value={this.state.password} style={styles.input}
              onChangeText={(text)=>{
                  this.setState({
                      password:text
                  })
              }}
              />
            </View>
            <View  style={styles.item}>
              <Text>确认密码</Text>
              <TextInput keyboardType={'numeric'} value={this.state.surepassword} style={styles.input}
              onChangeText={(text)=>{
                  this.setState({
                      surepassword:text
                  })
              }}
              />
            </View>
            <View  style={styles.item}>
              <Text>邮箱</Text>
              <TextInput value={this.state.email} style={styles.input} placeholder="请输入邮箱"/>
            </View>
            <View style={{marginTop:40}}>
            <Button
                    onPress={()=>{
                        Alert.alert(
                            '确定添加员工？',
                            null,
                            [
                            {text: '取消', onPress: () => {}},
                            {text: '确定', onPress: () => this.addemploy()},
                            {text: '', onPress: () =>{} },
                            ]
                        )
                    }}
                    title={this.state.changetype}
                    style={{padding:20}}
                    color="#841584"
            />
            </View>
            </View>
            
        
        </ScrollView>
            

        )
    }
}